<template>
  <div>
    <div class="title">
      <img class="love" src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
      <span class="text">猜你喜欢</span>
    </div>
      <ul>
        <router-link class="item border-bottom"
                     v-for="item of list"
                     :key="item.id"
                     tag=li
                     :to="'./detail/'+item.id">
            <img class="item-img" :src="item.imgUrl" alt="">
            <div class="item-info">
              <p class="item-title">{{item.title}}</p>
              <p class="item-desc">{{item.desc}}</p>
              <button class="item-bottom">99￥</button>
          </div>
        </router-link>
      </ul>
  </div>
</template>

<script>
export default{
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
@import "~styles/mixins.styl"
  .title
    background-color #eee
    line-height .8rem
    text-indent .2rem
    margin-top: .2rem
  .love
    width: .4rem
    height: .4rem
  .text
    font-size .3rem
  .item
    margin-top .2rem
    display flex
    height 1.9rem
    overflow hidden
    .item-img
      width 1.7rem
      height 1.7rem
      padding .1rem
    .item-info
      flex 1
      padding .1rem
      min-width 0
      minins()
      .item-title
        font-size .32rem
        line-height .54rem
      .item-desc
        margin-top: .04rem
        line-height .4rem
        color #ccc
      .item-bottom
        margin-top: .16rem
        background-color #ff9300
        padding 0 .2rem
        border-radius .06rem
        line-height .44rem
</style>
